<template>
  <view class="u-page">
    <view class="u-demo-block">
      <text class="u-demo-block__title">全部照片</text>
      <view class="u-demo-block__content">
        <view class="album">
          <view class="album__avatar">
          </view>
          <view class="album__content">
            <u-album multipleSize="" :urls="urls2" rowCount="1"  ></u-album>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getHouseInfo} from "@/config/api";
import {hasRequestProtocol} from "@/config/util/util";

export default {
  data() {
    return {
      albumWidth: 0,
      urls2: [
        // 'https://cdn.uviewui.com/uview/album/1.jpg',
        // 'https://cdn.uviewui.com/uview/album/2.jpg',
        // 'https://cdn.uviewui.com/uview/album/3.jpg',
        // 'https://cdn.uviewui.com/uview/album/4.jpg',
        // 'https://cdn.uviewui.com/uview/album/5.jpg',
        // 'https://cdn.uviewui.com/uview/album/6.jpg',
        // 'https://cdn.uviewui.com/uview/album/7.jpg',
        // 'https://cdn.uviewui.com/uview/album/8.jpg',
        // 'https://cdn.uviewui.com/uview/album/9.jpg',
        // 'https://cdn.uviewui.com/uview/album/10.jpg',
      ],
    }
  },
  onLoad({id}) {

    getHouseInfo(id).then(res => {

      this.urls2 = res.data.imgUrls
          .split("、").filter(url => url !== '').map(item => {
            if (hasRequestProtocol(item)) {
              return item;
            }
            return this.$baseFileUrl + item
          });
    })

  },
}
</script>

<style lang="scss">

.u-demo-block{
  margin-top: 30rpx;
}
.u-demo-block__title{
  padding-left: 30rpx;
}

.u-demo-block__content{
  margin-top: 30rpx;
}

.album {
  @include flex;
  align-items: flex-start;

  &__avatar {
    background-color: $u-bg-color;
    padding: 5px;
    border-radius: 3px;
  }

  &__content {
    margin-left: 10px;
    flex: 1;
  }
}
</style>
